<script lang="ts" setup>
  import { disposeAlarm } from '@/api-new/devices';
  import { useForm } from '@/hooks/arco/useForm';
  import { useModalBinder } from '@/hooks/arco/useModalBinder';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { Message } from '@arco-design/web-vue';

  const form = useForm({
    state: {
      id: '',
      disposeResult: '1',
      reason: '',
    },
    rules: {
      reason: {
        required: true,
        message: '请填写补充说明',
      },
    },
  });

  const modalBinder = useModeModalBinder({
    modes: ['add', 'detail'] as const,
    renderTitle(mode) {
      if (mode === 'add') {
        return '报警处理';
      }
      return '处理详情';
    },
    onShow(mode, otherParams) {
      form.backToInit();
      if (mode === 'add') {
        form.state.id = otherParams.id;
      } else {
        // form.state.disposeResult = otherParams

        form.setFieldsValue(otherParams);
      }
    },
    async onOkClick() {
      await form.validate();

      return disposeAlarm(form.state).then(() => {
        Message.success('处理成功！');
      });
    },
  });

  defineExpose(modalBinder.expose);
</script>

<template>
  <a-modal :footer="modalBinder.isShow('add')" v-bind="modalBinder.bindProps">
    <div class="flex flex-col gap-3">
      <span>如已处理，请选择处理方式</span>
      <a-radio-group
        v-model="form.state.disposeResult"
        class="mt-2"
        :disabled="modalBinder.isShow('detail')"
      >
        <a-radio :value="1">
          <template #radio="{ checked }">
            <a-tag :checked="checked" color="arcoblue" checkable
              >电话回复</a-tag
            >
          </template>
        </a-radio>
        <a-radio :value="2">
          <template #radio="{ checked }">
            <a-tag :checked="checked" color="arcoblue" checkable
              >上门查看</a-tag
            >
          </template>
        </a-radio>
        <a-radio :value="3">
          <template #radio="{ checked }">
            <a-tag :checked="checked" color="arcoblue" checkable
              >转交相关部门</a-tag
            >
          </template>
        </a-radio>
        <a-radio :value="0">
          <template #radio="{ checked }">
            <a-tag :checked="checked" color="arcoblue" checkable
              >无需处理</a-tag
            >
          </template>
        </a-radio>
      </a-radio-group>

      <a-form
        class="readonly-form"
        v-bind="form.bindProps"
        :disabled="modalBinder.isShow('detail')"
      >
        <a-form-item hide-label field="reason">
          <a-textarea
            v-model="form.state.reason"
            placeholder="请补充相关说明"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
